<!--个人信息页面-->
<template>
    <view>
        <view class="form-box">
            <view class="login-box">
                <uni-forms :modelValue="formObj" ref="FormData">
                    <uni-forms-item ref="icon" name="icon">
                        <view class="topavatar" @click="H5ImageClick">
                            <image class="avatar" :src="formObj.icon" style="width: 100%; height: 100%" />
                            <view class="cameraIcon">
                                <image class="img" :src="require('../static/camera.png')"
                                    style="width: 100%; height: 100%; position: absolute; left: 0"></image>
                            </view>
                        </view>
                    </uni-forms-item>

                    <uni-forms-item ref="nickname" name="nickname">
                        <view class="form-item">
                            <view class="label-box">
                                <view class="label-left">
                                    <text class="label-title">昵称</text>
                                </view>
                            </view>
                            <view class="item-input">
                                <uni-easyinput type="text" placeholder="请您输入12字以内的昵称" maxlength="12"
                                    v-model="formObj.nickname" clearable></uni-easyinput>
                            </view>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item ref="phone" name="phone">
                        <view class="form-item">
                            <view class="label-box">
                                <view class="label-left">
                                    <text class="label-title">关联手机号</text>
                                </view>
                            </view>
                            <view class="item-input">
                                <uni-easyinput disabled type="text" maxlength="11" v-model="formObj.phone"
                                    :clearable="false"></uni-easyinput>
                            </view>
                        </view>
                    </uni-forms-item>
                    <view class="footer">
                        <button class="footer-btn" @click="submit">确定</button>
                        <view class="footer-btn1" @click="cancle">退出登录</view>
                    </view>
                </uni-forms>
            </view>
        </view>

    </view>
</template>

<script>
import { updateUserInfoApi } from "@/api/user";
import store from "@/store";
import { mapGetters } from "vuex";
import Authorize from "@/components/Authorize.vue";
export default {
    components: {
        Authorize,
    },
    data() {

        return {
            isShowAuth: false,
            formObj: {
                icon: "",
                nickname: "",
                phone: "",

            },
        };
    },
    computed: {
        ...mapGetters(["isLogin"]),
    },
    async onLoad() {

        this.getUserInfo()
    },
    mounted() { },
    methods: {
        cancle() {
            store.commit("LOGOUT")
            store.dispatch('CLOSE_ACTIVITY')
            this.$util.Tips({ title: "", endtime: 500 }, () => {
                uni.redirectTo({
                    url: '/pagesWater/users/login'
                })
                uni.$emit('loginOut')
            });

            // this.isShowAuth = false
        },
        getUserInfo() {
            let that = this
            store.dispatch("USERINFO").then(res => {
                this.formObj.icon = res.icon
                this.formObj.nickname = res.nickname
                this.formObj.phone = res.phone
            })
        },
        H5ImageClick() {
            this.$util.uploadImageOne(
                {
                    type: 3,
                    name: "multipart",
                },
                (res) => {
                    let data = JSON.parse(res.data);
                    this.formObj.icon = data.data.url;
                }
            );
        },

        async submit() {
            if (!this.formObj.icon) return this.$util.Tips("请上传头像");
            updateUserInfoApi(this.formObj).then(res => {
                this.$util.Tips({ title: '', endtime: 500 }, () => {
                    uni.switchTab({ url: "/pages/users/index" });
                });
            });


        },


    },
};
</script>

<style lang="scss" scoped>
page {
    background-color: #fff !important;
}

.footer {
    margin-top: 73rpx;
    width: 690rpx;
    // height: 88rpx;

    border-radius: 12rpx;

    .footer-btn {
        width: 100%;
        height: 88rpx;
        background: #276ff7;
        line-height: 88rpx;
        text-align: center;
        border-radius: 8rpx;
        font-weight: 600;
        font-size: 34rpx;
        color: #ffffff;
    }

    .footer-btn1 {
        margin-top: 20rpx;
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        border-radius: 8rpx;
        font-weight: 600;
        font-size: 34rpx;
        color: #276ff7;
        border: 2rpx solid #276ff7;
    }
}

/deep/ .uni-date-single {
    .uni-icons {
        display: none;
    }

    .uni-date__x-input {
        font-weight: 400;
        font-size: 18px;
        color: rgb(153, 153, 153);
    }
}

/deep/ .uni-forms-item {
    margin-bottom: 0rpx;
    margin-bottom: 40rpx;

    &:first-child {
        margin-bottom: 67rpx;
    }
}

/deep/ .is-input-border {
    border: none !important;
}

/deep/ .uni-easyinput__placeholder-class {
    font-weight: 400;
    font-size: 34rpx;
    color: #999999;
}

/deep/ .uni-easyinput__content-input {
    padding-left: 0 !important;
}

/deep/ .uni-input-input {
    color: #999;
    font-size: 34rpx;
}

/deep/ .is-disabled {
    background-color: #fff !important;
}

/deep/ .uni-label-pointer {
    span {
        color: #999999;
    }

    .uni-radio-wrapper {
        color: #999999;

        .uni-radio-input {
            margin-right: 0;
            transform: scale(0.65) !important;
        }
    }
}

.topavatar {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    border: 1rpx solid #ebebeb;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    line-height: 120rpx;

    .avatar {
        border-radius: 50%;
    }

    button {
        padding: 0;
    }

    .cameraIcon {
        position: absolute;
        bottom: -10rpx;
        right: 8rpx;
        width: 50rpx;
        height: 50rpx;
    }
}

.form-box {
    padding: 0 30rpx;
    padding-top: 40rpx;
    background-color: #fff;
    min-height: 100vh;
    border-top: 2rpx solid #F5F5F5;
}

.login-box {
    .form-item {
        .label-box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .label-left {
                display: flex;
                align-items: center;

                .label-title {
                    font-weight: 600;
                    font-size: 30rpx;
                    color: #333333;
                }
            }

            .label-right {
                .get-code {
                    width: 180rpx;
                    height: 70rpx;
                    line-height: 70rpx;
                    text-align: center;
                    background: #2872fd;
                    border-radius: 6rpx;
                    font-weight: 600;
                    font-size: 30rpx;
                    color: #ffffff;
                }

                .btnDisabledStyle {
                    width: 180rpx;
                    height: 70rpx;
                    line-height: 70rpx;
                    font-size: 30rpx;
                    background: #cccccc;
                    cursor: not-allowed;
                    border: none;
                    color: white;
                    text-align: center;
                    border-radius: 6rpx;
                }
            }
        }

        .item-input {
            margin-top: 18rpx;
            border-bottom: 1rpx solid #e6e6e6;
            padding-bottom: 31rpx;
        }
    }

    .login-btn {
        margin-top: 80rpx;
    }

    .first-title {
        margin-top: 20rpx;
        font-weight: 400;
        font-size: 30rpx;
        color: #999999;
    }

    .more {
        width: 30rpx;
        height: 30rpx;
        margin-left: 10rpx;
    }
}
</style>
